/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="select-service__container">
        <div class="service-img">
            <img src="../../../img/select_service.png"
                 alt="">
        </div>
        <div class="title">
            <lang>点一点，发布分享你的模型和算法</lang>
        </div>

        <div v-for="(item,index) in list" 
             :key="index"
             class="service__item" 
             :class="[{'active':activeIndex===index},item.url]" 
             @click="_selectService(item,index)">
            <div class="service__img"
                 :class="item.url">
            </div>
            <div class="service__name">
                {{ item.name }}
            </div>
        </div>
    </div>
</template>
<script lang="ts">
    

const DEFAULT_VALUE = {
    time_select:true
};

import { Component, Vue } from 'vue-property-decorator';

interface ServiceType {
    name: string;
    url: string;
}

@Component
export default class SelectServiceForm extends Vue {
  
    submitData =  { ...DEFAULT_VALUE }
    activeIndex =  -1
    list =  [{
        name:_('Web Service'),
        url:'web'
    }, {
        name:_('Stream Service'),
        url:'stream'
    }]
    serviceType = 'web'
 
    _selectService (item: ServiceType, index: number) {
        this.serviceType = item.url;
        this.activeIndex = index;
        this.$parent.options.selectService(item.url);
    }
    getJsonValue () {
        return { serviceType: this.serviceType};
    }
     
};
</script>
<style lang="less">
    .select-service__container{
        margin-bottom: 166px;
        .service-img{
            margin: 0 auto 10px;
            text-align: center;
            img{
                width: 160px;
            }
        }
        .title{
            text-align: center;
            margin-bottom: 30px;
            font-size: 14px;
            color: #A3A3A3;
        }
        .service__item{
            width: 535px;
            height: 80px;
            display: flex;
            align-items: center;
            margin: 0 50px 16px;
            font-size: 16px;
            color: #14161A;
            cursor: pointer;
             &.web{
                background: url(../../../img/service/web_normal.png);
                background-size: 100% 100%;
                &:hover{
                    background: url(../../../img/service/web_hover.png);
                    background-size: 100% 100%;
                }
                &.active{
                     background: url(../../../img/service/web_click.png);
                    background-size: 100% 100%;
                }
            }
            &.stream{
                background: url(../../../img/service/stream_normal.png);
                background-size: 100% 100%;
                &:hover{
                    background: url(../../../img/service/stream_hover.png);
                    background-size: 100% 100%;
                }
                &.active{
                     background: url(../../../img/service/stream_click.png);
                    background-size: 100% 100%;
                }
            }
            .service__img{
                margin-left: 32px;
                margin-right: 10px;
                width: 40px;
                height: 40px;
                border-radius: 100%;
                border:1px solid #ddd;
                &.web{
                    background: url(../../../img/service/web.png);
                    background-size: 100% 100%;
                }
                &.stream{
                    background: url(../../../img/service/stream.png);
                    background-size: 100% 100%;
                }
            }
        }
    }
</style>   
    
        